<template>
  <a-card
    class="top-toolbar"
    :body-style="{ padding: '0 12px', borderRadius: '0' }"
    :bordered="false"
  >
    <div class="flex justify-between py-1">
      <a-flex :align="'center'" :gap="4">
        <img :src="logo" width="20" style="object-fit: contain" />
        <div class="text-linear-gradient">
          {{ globalConfig?.pageConfig.pageTitle || 'AX后端管理系统' }}
        </div>
      </a-flex>
      <a-flex :gap="4">
        <div class="system__icon" @click="setting">
          <SettingOutlined />
        </div>
        <Profile />
      </a-flex>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { getSystemIcon } from '@/api/utils/image';
import logo from '@/assets/logo.png';
import { ProgramEnum } from '@/global/enum/windows.enum';
import { openWindow } from '@/global/window/window';
import PageSetting from '@/views/desktop/setting/PageSetting.vue';

import { SettingOutlined } from '@ant-design/icons-vue';
import Profile from './profile/Profile.vue';
import { globalConfig } from '@/initialization';

const setting = () => {
  openWindow({
    title: '系统设置',
    component: markRaw(PageSetting),
    id: ProgramEnum.PAGE_SETTING,
    w: 800,
    h: 600,
    icon: getSystemIcon('setting.png'),
  });
};
</script>

<style lang="scss" scoped>
.top-toolbar {
  position: relative;
  z-index: 10;
  border-radius: 0;
  background: var(--underpainting) !important;
  box-shadow: none;
}
</style>
